<div>
    <app-sql-statement [query]="query">
        @if(dataSource.data.length == 0) {
            <div class="no-results">No results were found</div>
        } @else {
            See Query
        }
    </app-sql-statement>
    <table mat-table
        [dataSource]="dataSource" multiTemplateDataRows
        class="mat-elevation-z8">
    @for (column of columnsToDisplay; track column) {
        <ng-container matColumnDef="{{column}}">
            <th mat-header-cell *matHeaderCellDef> {{column}} </th>
            <td mat-cell *matCellDef="let element"> 
                @if (column === 'email') {
                    <a [routerLink]="['/chat', element['id']]">{{element[column]}}</a>
                }
                @else { 
                    {{element[column]}} 
                }
            </td>
        </ng-container>
    }
        <ng-container matColumnDef="expand">
            <th mat-header-cell *matHeaderCellDef aria-label="row actions">&nbsp;</th>
            <td mat-cell *matCellDef="let element">
            <button mat-icon-button aria-label="expand row" (click)="(expandedElement = expandedElement === element ? null : element); $event.stopPropagation()">
                @if (expandedElement === element) {
                <mat-icon>keyboard_arrow_up</mat-icon>
                } @else {
                <mat-icon>keyboard_arrow_down</mat-icon>
                }
            </button>
            </td>
        </ng-container>

        <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->
        <ng-container matColumnDef="expandedDetail">
            <td mat-cell *matCellDef="let element" [attr.colspan]="columnsToDisplayWithExpand.length">
            <div class="prospect-element-detail"
                [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
                <div class="prospect-picture">
                    <!-- placeholder for picture -->
                </div>
                <div class="prospect-bio" innerHtml="{{element.bio | textToHtml}}"></div>
            </div>
            </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="columnsToDisplayWithExpand"></tr>
        <tr mat-row *matRowDef="let element; columns: columnsToDisplayWithExpand;"
            class="prospect-element-row"
            [class.prospect-expanded-row]="expandedElement === element"
            (click)="expandedElement = expandedElement === element ? null : element">
        </tr>
        <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="prospect-detail-row"></tr>
    </table>
</div>